import { Card as SemiCard, ButtonGroup, Button, List as SemiList } from "@douyinfe/semi-ui";
import { IconPlusCircle, IconRefresh, IconDelete, IconEdit } from "@douyinfe/semi-icons";
import { useEffect } from "react";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import { Avatar, Card, message, Popconfirm, Row, Col, Spin, Space, Modal, Badge, List, Descriptions, Table, Tooltip } from "antd";
import { UserOutlined } from "@ant-design/icons";
import { EyeOutlined, ApartmentOutlined, TableOutlined } from "@ant-design/icons";
import Jdenticon from "react-jdenticon";

import useHelperInstitution from "../helper/useHelperInstitution";

import useAllInstitutions from "../hooks/institution/useAllInstitutions";
import useDeleteInstitution from "../hooks/institution/useDeleteInstitution";
import useInstitutionMembers from "../hooks/institution/useInstitutionMembers";
import useInstitutionDeletePosition from "../hooks/institution/useDeletePosition";

const oiType = "专业组";

const SpecialityPage = () => {
    const { windowInnerHeight } = useModel("global");
    const { openAddSpecialityInstitutionModal } = useHelperInstitution();

    const { loading, institutions, loadAllInstitutions } = useAllInstitutions(oiType);

    const state = useReactive({
        currentGroup: {},
    });

    useEffect(() => {
        let currentGroup = institutions.find((item) => item.oiUuid === state.currentGroup?.oiUuid);
        !currentGroup && institutions.length > 0 && (currentGroup = institutions[0]);
        state.currentGroup = currentGroup || {};
    }, [institutions]);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 48;

    return (
        <Row gutter={10} style={{ padding: 10 }}>
            <Col span={5}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>{oiType}列表</span>}
                    headerStyle={{ padding: "7px 12px" }}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconPlusCircle />} onClick={() => openAddSpecialityInstitutionModal({ reloadData: loadAllInstitutions })}></Button>
                            <Button icon={<IconRefresh />} onClick={loadAllInstitutions}></Button>
                        </ButtonGroup>
                    }
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 1, height: cardBodyHeight, overflow: "auto" }}
                >
                    <SemiList
                        loading={loading}
                        dataSource={institutions}
                        renderItem={(item, index) => (
                            <SemiList.Item
                                key={index}
                                style={{ padding: "12px 12px 12px 24px" }}
                                className={`list-item ${state.currentGroup?.oiUuid === item?.oiUuid ? "list-item-selected" : ""}`}
                                main={item?.oiName}
                                onClick={() => (state.currentGroup = item)}
                            ></SemiList.Item>
                        )}
                    />
                </SemiCard>
            </Col>
            <Col span={19}>{state.currentGroup?.oiUuid && <SpecialityDetail {...state} currentGroup={state.currentGroup} reloadData={loadAllInstitutions} />}</Col>
        </Row>
    );
};

const SpecialityDetail = ({ currentGroup, reloadData }) => {
    const { windowInnerHeight } = useModel("global");
    const { openEditSpecialityInstitutionModal, openAddInstitutionMemberModal } = useHelperInstitution();
    const { loading, loadInstitutionMembers, members } = useInstitutionMembers(currentGroup.oiUuid);
    const { deleteInstitution } = useDeleteInstitution();

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 48;

    return (
        <Row gutter={10}>
            <Col span={8}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>专业组详情</span>}
                    headerStyle={{ padding: "7px 12px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 10, height: cardBodyHeight }}
                    headerExtraContent={
                        <Space>
                            <ButtonGroup className="bnts">
                                <Button
                                    title="编辑当前项目组信息"
                                    icon={<IconEdit />}
                                    onClick={() => openEditSpecialityInstitutionModal({ institution: currentGroup, reloadData })}
                                />
                                <Popconfirm title={`确认要删除该项目组信息吗？`} onConfirm={() => deleteInstitution(currentGroup.oiUuid, reloadData)}>
                                    <Button title="删除当前项目组" icon={<IconDelete style={{ color: "#E91E63" }} />}></Button>
                                </Popconfirm>
                            </ButtonGroup>
                        </Space>
                    }
                >
                    <Descriptions size="small" bordered column={1} style={{ padding: 0 }} labelStyle={{ color: "#999", width: 120, textAlign: "left" }}>
                        <Descriptions.Item label="组名称">{currentGroup.oiName}</Descriptions.Item>
                        <Descriptions.Item label="负责人">{currentGroup.maInfo?.osName || "-"}</Descriptions.Item>
                        <Descriptions.Item label="管理人">{currentGroup.asInfo?.osName || "-"}</Descriptions.Item>
                        <Descriptions.Item label="备注说明">{currentGroup.oiDesc || "-"}</Descriptions.Item>
                        <Descriptions.Item label="创建信息">
                            {currentGroup.crInfo?.name} - {currentGroup.crInfo?.time ? formatUTCTime(currentGroup.crInfo.time) : ""}
                        </Descriptions.Item>
                        <Descriptions.Item label="更新信息">
                            {currentGroup.upInfo?.name} - {currentGroup.upInfo?.time ? formatUTCTime(currentGroup.upInfo.time) : ""}
                        </Descriptions.Item>
                    </Descriptions>
                </SemiCard>
            </Col>
            <Col span={16}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>{currentGroup.oiName} - 专业组成员列表</span>}
                    headerStyle={{ padding: "7px 12px" }}
                    headerExtraContent={
                        <Space>
                            <ButtonGroup>
                                <Button
                                    icon={<IconPlusCircle />}
                                    title="添加专业组成员"
                                    onClick={() =>
                                        openAddInstitutionMemberModal({
                                            institution: currentGroup,
                                            institutionMembers: members,
                                            reloadData: loadInstitutionMembers,
                                        })
                                    }
                                />
                                <Button icon={<IconRefresh />} onClick={loadInstitutionMembers}></Button>
                            </ButtonGroup>
                        </Space>
                    }
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
                >
                    <SpecialityGroupMembers loading={loading} members={members} reloadData={loadInstitutionMembers} />
                </SemiCard>
            </Col>
        </Row>
    );
};

const SpecialityGroupMembers = ({ members, reloadData }) => {
    const { deleteInstitutionPosition } = useInstitutionDeletePosition();

    const renderOperate = (_, r, i) => (
        <ButtonGroup>
            <Popconfirm
                title="确认要删除该成员信息吗？"
                okButtonProps={{ loading: false }}
                onConfirm={async () => {
                    let res = await deleteInstitutionPosition(r.reUuid);
                    if (res) {
                        message.success("成功移除成员信息");
                        reloadData();
                    }
                }}
            >
                <Button theme="borderless" style={{ color: "#f50" }}>
                    移除
                </Button>
            </Popconfirm>
        </ButtonGroup>
    );

    return (
        <Table bordered dataSource={members} rowKey={"id"} size="small" pagination={false}>
            <Table.Column title="序号" width={69} align="center" render={(_, r, i) => i + 1} />
            <Table.Column title="姓名" dataIndex={"omName"} />
            <Table.Column title="角色" dataIndex={"oimRemk"} />
            <Table.Column title="类型" dataIndex={"reType"} />
            <Table.Column title="操作" width={80} render={renderOperate} />
        </Table>
    );
};

export default SpecialityPage;
